<template>
	<!-- 列表组件 -->
	<scroll-view :scroll-y="true" class="scroll-list" :lower-threshold="threshold" :refresher-triggered="triggered"
		@scrolltolower="onScrollToLower" :refresher-enabled="enabled" @refresherrefresh="onRefresh">
		<view class="list-wrapper" v-if="list.length > 0">
			<view class="li-box" v-for="(item, index) in list" :key="index">
				<slot :item="item" :index="index">
					<geek-item :item="item"></geek-item>
				</slot>
			</view>
		</view>
		<view class="no-data" v-else>
			<up-empty mode="list" icon="/static/images/empty/list.png" v-if="loadStatus === 'noMore'" :text="empty"></up-empty>
		</view>
		<uni-load-more :status="loadStatus" :content-text="contentText" v-if="isPage && (loadStatus!== 'noMore' || list.length > 0)"></uni-load-more>
	</scroll-view>
</template>

<script setup>
	import _ from 'lodash'
	import {
		onMounted,
		ref
	} from 'vue'

	const triggered = ref(false)
	const loadStatus = ref('loading')
	const page = ref(1)
	const total = ref(0)
	const list = ref([])

	const contentText = {
		contentdown: '查看更多',
		contentrefresh: '加载中',
		contentnomore: '没有更多'
	}

	const props = defineProps({
		isPage: {
			type: Boolean,
			default: false
		}, //是否分页
		threshold: {
			type: Number,
			default: 100
		},
		empty:{
			type: String,
			default: '暂无数据'
		},
		enabled: {
			type: Boolean,
			default: true
		}, //是否开启下拉刷新
		data:{
			type:Array,
			default(){
				return []
			}
		},
		api: {
			type: Function,
			default: null,
			// required: true
		} //列表接口
	})

	// 获取列表数据
	function fetchList(args) {
		if(!props.api || !props.api()){
			list.value = props.data || []
			loadStatus.value = 'noMore'
			return false
		}
		
		loadStatus.value = 'loading'
		const params = props.isPage ? {
			pageNum: page.value,
			pageSize: 10,
			...args
		} : {}
		
		const size = _.get(args, 'pageSize', 10)

		props.api(params).then((data) => {
			if (!props.isPage) {
				list.value = _.isArray(data) ? data || [] : data?.rows || []
				loadStatus.value = 'noMore'
				return false
			}
			
			list.value = list.value.concat(data?.rows || [])
			total.value = Number(data?.total) || 0
			loadStatus.value = total.value > size && page.value * size < total.value ? 'more' : 'noMore'
		}).finally(() => {
			triggered.value = false;
		});
	}

	// 滚动到底部加载
	function onScrollToLower() {
		if (loadStatus.value != 'noMore') {
			page.value++;
			fetchList()
		}
	}

	// 下拉刷新
	function onRefresh() {
		if (triggered.value) return;
		triggered.value = true;
		resetList()
	}

	function resetList() {
		page.value = 1
		total.value = 0
		list.value = []
		fetchList()
	}

	// 更新列表数据
	function updateItem(item) {
		const index = list.value.findIndex(vo => vo.id === item.id)
		list.value.splice(index, 1, item)
	}

	onMounted(() => {
		fetchList()
	})

	defineExpose({
		list,
		resetList,
		updateItem,
		onScrollToLower
	})
</script>

<style lang="scss" scoped>
	.scroll-list {
		flex: 1;
		overflow: hidden;
	}

	.list-wrapper {
		.li-box {
			&+.li-box {
				margin-top: 24rpx;
			}
		}
	}
	
	.uni-load-more{
		height: 100rpx;
	}
</style>
